<template>
  <div id="category">
    <nav-bar class="c-nav">
      <div slot="center">商品分类</div>
    </nav-bar>
    <div class="main">
      <div class="left">
        <category-navbar :list="list" @selectItem="selectItem" />
      </div>
      <div class="right">
        <tab-control
          :titles="['流行', '新款', '精选']"
          @tabClick="tabClick"
          ref="tabControl1"
          class="tab-fixed"
          v-show="isTabFixed"
        ></tab-control>
        <scroll
          class="c-scroll-right"
          ref="scroll"
          @scroll="contentScroll"
          :probe-type="3"
        >
          <div>
            <category-content
              :subcategories="showSubcategory"
              @contentimageLoad="contentimageLoad"
            />
            <tab-control
              :titles="['流行', '新款', '精选']"
              @tabClick="tabClick"
              ref="tabControl2"
            ></tab-control>
            <goods-list :goods="showCategoryGoods"></goods-list>
          </div>
        </scroll>
        <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
      </div>
    </div>
  </div>
</template>

<script>
// 子组件
import CategoryNavbar from "./childComps/CategoryNavbar";
import CategoryContent from "./childComps/CategoryContent";

// 公共组件
import NavBar from "components/common/navbar/NavBar";
import Scroll from "components/common/scroll/Scroll";
import TabControl from "components/content/tabControl/TabControl";
import GoodsList from "components/content/goods/GoodsList";

import {
  getcategorydata,
  getSubcategory,
  getCategoryDetail,
} from "network/category";
import { backTopMixin } from "common/mixin";

export default {
  name: "Category",
  components: {
    NavBar,
    Scroll,
    CategoryNavbar,
    CategoryContent,
    TabControl,
    GoodsList,
  },
  mixins: [backTopMixin],
  data() {
    return {
      list: [],
      cData: {},
      currentIndex: -1,
      currentType: "pop",
      tabOffsetTop: 0,
      // 用于nav吸顶的显示隐藏
      isTabFixed: false,
    };
  },

  // 一、组件创建完 就发送网络请求
  created() {
    // 1.请求导航的数据
    this.getcategorydata();
  },
  computed: {
    showSubcategory() {
      if (this.currentIndex === -1) return;
      return this.cData[this.currentIndex].subcategories;
    },
    showCategoryGoods() {
      if (this.currentIndex === -1) return;
      const cdata = this.cData[this.currentIndex].cDetail[this.currentType];
      return cdata;
    },
  },
  methods: {
    /**
     * 一、网络请求相关的方法
     */

    // 一、获取导航模块的数据
    getcategorydata() {
      getcategorydata().then((res) => {
        // 1.获取分类的数据
        this.list = res.data.category.list;
        // 2.初始化每个类别的子数据
        for (let i = 0; i < this.list.length; i++) {
          this.cData[i] = {
            subcategories: {},
            cDetail: {
              pop: [],
              new: [],
              sell: [],
            },
          };
        }
        // 3.请求第一个分类的数据
        this.getSubcategory(0);
      });
    },

    // 二、获取点击的nav的数据
    getSubcategory(index) {
      this.currentIndex = index;
      const maitKey = this.list[index].maitKey;
      getSubcategory(maitKey).then((res) => {
        this.cData[index].subcategories = res.data;
        this.cData = { ...this.cData };
        // 获取详情页的数据
        this.getCategoryDetail("pop");
        this.getCategoryDetail("new");
        this.getCategoryDetail("sell");
      });
    },

    // 三、获取下面详情的数据
    getCategoryDetail(type) {
      // 1.获取请求的miniWallkey
      const miniWallkey = this.list[this.currentIndex].miniWallkey;
      // 2.发送请求
      getCategoryDetail(miniWallkey, type).then((res) => {
        // 3.将获取的数据保存下来
        this.cData[this.currentIndex].cDetail[type] = res;
        this.cData = { ...this.cData };
      });
    },

    /**
     * 二、事件监听
     */

    // 找到点击的是哪个nav
    selectItem(index) {
      this.getSubcategory(index);

      // 点击了nav要再次获取tabControl的offsetTop
      this.contentimageLoad();
    },

    // 获取详情页点击的类型
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;
    },

    // 实时监听滚动距离的判断
    contentScroll(position) {
      // 1.判断BackTop是否显示
      // 把y值转为正 如果大于就为true
      this.isShowBackTop = -position.y > 1000;

      // 2.决定tabControl是否吸顶(positon: fixed)
      this.isTabFixed = -position.y > this.tabOffsetTop;
    },

    // 获取切换栏距离顶部的距离
    swiperImageLoad() {
      // 2.获取tabControl的offsetTop
      // 组件没有offsetTop
      // 所有的组件都有一个属性$el: 用于获取组件中的元素
      // 上面的图片没加载完 数值就不准. 轮播图加载完了,下面的图也都加载完了
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
    },

    contentimageLoad() {
      // 获取tabControl的offsetTop
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
      // console.log(this.tabOffsetTop);
    },
  },
};
</script>

<style scoped>
#category {
  position: relative;
  height: 100vh;
}
.c-nav {
  background: var(--color-tint);
  font-size: 22px;
  color: #fff;
  font-weight: 600;
}
.main {
  display: flex;
  /* overflow-y: scroll; */
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;
}

.left {
  flex: 1;
}

.right {
  flex: 3;
  position: relative;
}

.c-scroll-right {
  overflow: hidden;
  height: 100%;
}

.tab-fixed {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  margin-top: 0;
}
</style>